import { Avatar, Card, Tag, Statistic, Divider } from 'antd';
import { FieldTimeOutlined } from '@ant-design/icons';
import { history } from 'umi';
const { Meta } = Card;
import './index.less';
import { UserInfo } from '@/types/user';
import configs from '../../../config/env';
interface TourProps {
  widths?: number;
  title: string;
  time: string;
  price: number;
  remark: string | null;
  bacImg: string | null;
  id: number;
  userInfo: UserInfo;
  tags: string;
}
const Tour: React.FC<TourProps> = (props) => {
  const { widths, title, time, price, remark, bacImg, id, userInfo, tags }: TourProps = props;
  const handleClickToDetail = (id: number) => {
    history.push('/tours-detail/' + id);
  };
  const handleClickToFeedDetail = (userId: number) => {
    history.push('/feed-detail/' + userId);
  };
  const handleClickTags = (tags: string) => {
    window.open('/tours?tags=' + tags);
    // history.push({
    //   pathname: '/tours',
    //   query: {
    //     tags,
    //   },
    // });
  };
  const coverPic = (
    <img
      src={
        bacImg ? configs[process.env.API_ENV as any].API_SERVER + bacImg : '/images/16648898720.jpg'
      }
      onClick={() => handleClickToDetail(id)}
    />
  );
  const titles = <span onClick={() => handleClickToDetail(id)}>{title}</span>;
  return (
    <div className="tour_wrapper" style={{ width: widths ? widths : '' }}>
      <Card cover={coverPic}>
        <Meta
          avatar={
            <Avatar
              size={50}
              src={
                userInfo?.avatar
                  ? configs[process.env.API_ENV as any].API_SERVER + userInfo?.avatar
                  : '/images/cat.e69c9c17.jpg'
              }
              onClick={() => handleClickToFeedDetail(userInfo?.userId)}
            />
          }
          title={titles}
          description={remark}
        />
        <Divider></Divider>
        <div className="tour_info">
          <Tag color="#108ee9" className="tour_tag" onClick={() => handleClickTags(tags)}>
            {tags}
          </Tag>
          <div className="money">
            约每人 <Statistic value={price} style={{ margin: '0 4px 4px' }} />元
          </div>
        </div>
        <div className="time">
          <FieldTimeOutlined color="#fff" style={{ fontSize: 20 }} />
          <span style={{ marginLeft: 4 }}>{time}小时</span>
        </div>
      </Card>
    </div>
  );
};
export default Tour;
